<style lang="less" scoped>
.page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  .swiper {
    flex: 1;
    &-item {
      overflow-y: auto;
    }
  }
}
</style>

<template>
  <div class="page">
    <!-- tab-title -->
    <scroll-tab v-if="tabs.length>0" :activeIndex="activeIndex" :tabs="tabs" @indexChange="indexChange" />

    <!-- swiper -->
    <swiper class="swiper" @change="swiperChange" :current="activeIndex">
      <swiper-item class="weui-tab__content swiper-item" key="0">
        <gongshang @countChange="countChange"></gongshang>
      </swiper-item>
      <swiper-item class="weui-tab__content swiper-item" key="1">
        <xinyong @countChange="countChange"></xinyong>
      </swiper-item>
    </swiper>
  </div>
</template>
<script>
import ScrollTab from '@/components/ScrollTab';
import Gongshang from './gongshang';
import Xinyong from './xinyong';

export default {
  components: {
    ScrollTab,
    Gongshang,
    Xinyong
  },
  data() {
    return {
      activeIndex: 0,
      gongshang: 0,
      xinyong: 0
    };
  },
  computed: {
    tabs() {
      return [`工商局(${this.gongshang})`, `信用中国(${this.xinyong})`];
    }
  },
  onUnload() {
    this.activeIndex = 0;
    this.gongshang = 0;
    this.xinyong = 0;
  },
  methods: {
    swiperChange(e) {
      // swiper切换
      this.activeIndex = e.mp.detail.current;
    },
    indexChange(index) {
      // tab切换
      this.activeIndex = index;
    },
    countChange(item) {
      this[item.type] = item.count;
    }
  }
};
</script>
